<!-- 组局详情，王奕程 -->
<template>
	<view class="box">
		<!-- 最上方，剧本信息，分享按钮 -->
		<view class="header">
			<view class="h_left">
				<image :src="x_data.g_img" mode="" @click="valTo()"/>
				<view>
					<view>{{x_data.g_name}}</view>
					<view>{{game_num}}人/{{x_data.g_msg1}}小时/</view>
					<view>{{x_data.g_msg2}}</view>
					<view>
						<icon v-for="count in Number(score_full)" class="iconfont icon-fire"/>
						<icon v-if="score_half>0" class="iconfont icon-huo"/>
						<text>{{x_data.g_score}}分</text>
					</view>
					<view>{{x_data.g_price}} 元/人</view>
				</view>
			</view>
			<button class="h_right" open-type="share">
				<icon class="iconfont icon-zhuanfa1"/>
				<text>邀请参加</text> 
			</button>
		</view>
		<!-- 第二块，游戏开始时间，参与人数 -->
		<view class="time">
			<view>
				<text>开局时间</text>
				<view>{{x_data.g_time}}</view>
			</view>
			<view>
				<text>开局人数</text>
				<view>{{game_num}}人</view>
			</view>
		</view>
		<!-- 第三块，主持人信息，安全注意事项 -->
		<view class="msg">
			<text>主持</text>
			<view>
				<view v-if="x_data.a_state==1">
					<image :src="x_data.a_img" mode="" />
					<view>
						<text>{{x_data.a_name}}</text>
						<view>带本次数：{{x_data.a_num}}次</view>
					</view>
				</view>
				<view v-else>
					<view class="unselected">
						待选
					</view>
				</view>
				<view>
					<icon class="iconfont icon-huangguan"/>
					<text v-if="x_data.a_state==1&&x_data.a_score">{{x_data.a_score}}%</text>
					<text v-else>暂无</text>
				</view>
			</view>
			<view>
				<view>??拼车注意事项??</view>
				<view>1，不要迟到,不要迟到,不要迟到??迟到超过30分钟，定金不退还哦??</view>
				<view>2，如果没有拼成功，会在24小时内?把定金原路返回。3，玩本过程中，因个人原因跳车离开，根据行业规则，需付整车打本费用??</view>
				<view>4，晚场超过12点30分,收取休仙费10元/人,超过2点收取休仙费20元/人??(直接红包给DM)。</view>
				<view>5，DM会控制每个环节的节奏,请跟随DM??避免剧情长时间停留在某一个阶段，影响您的体验。</view>
				<view>6，打本过程中一定要带入自己的人物角色??尽量不要聊场外，这样才能有好的体验呢??</view>
				<view>7，欢迎打本结束后可以向店长分享自己的体验感和建议，对于Dm有什么意见可以大胆提哦，我们会认真考虑每个玩家给予的意见和建议，及时落实和纠正?</view>
			</view>
		</view>
		<!-- 第四块，组队详情 -->
		<view class="team">
			<text>组局成员</text>
			<view>
				<view>{{team_num}}人</view>
				<view>
					<view>♂</view>
					<view>{{x_data.t_boy}}/{{x_data.g_boy}}</view>
				</view>
				<view>
					<view>♀</view>
					<view>{{x_data.t_girl}}/{{x_data.g_girl}}</view>
				</view>
			</view>
			<view v-for="v in x_data.t_msg" :key="v.t_name">
				<image :src="v.t_img" mode="" />
				<view>
					<view>{{v.t_name}}</view>
					<text>{{v.t_time}}</text>
				</view>
			</view>
		</view>
		<!-- 无效区域，定位悬空留白 -->
		<view class="null" />
		<!-- 下方悬空按钮 -->
		<view class="footer">
			<!-- -1：过期。1：正在拼单。2：满员。3：游戏中 -->
			<view v-if="team_num<game_num&&x_data.g_state==1&&pay_state==0" @click="pay">加入并支付定金￥10元</view>
			<view v-else-if="pay_state==1&&x_data.g_state==1" class="full">已加入，等待开始......</view>
			<view v-else-if="x_data.g_state==3" class="full">正在游戏中......</view>
			<view v-else-if="x_data.g_state==2" class="full">本局人已满</view>
			<view v-else-if="x_data.g_state==-1" class="full">此组局已过期</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				x_data:{
					// g_state:1,//游戏状态，1正在拼单，2满员，3游戏中
					// g_img:'../../../static/images/test_wyc/logo.jpg',//游戏图片
					// g_name:'章鱼游戏',//游戏名称
					// g_boy:4,//游戏男孩人数
					// g_girl:4,//游戏女孩人数
					// g_msg1:'4-5',//游戏信息2，时间
					// g_msg2:'欢乐，机制',//游戏信息2，类型
					// g_price:78,//游戏价格
					// g_time:'5月26日 周四 15：00',//游戏开局时间
					// a_img:'../../../static/images/test_wyc/tou.png',//主持人图片
					// a_name:'小胖',//主持人名称
					// a_num:312,//主持人带本次数
					// a_score:100,//主持人分数
					// t_boy:1,//组局男生人数
					// t_girl:1,//组局女生人数
					// t_msg:[{ //组局成员信息
					// 	t_img:'http://124.220.177.66:8082/uploads/店铺/主持人头像/dm3.webp',
					// 	t_name:'线下男生',
					// 	t_time:'2022/05/26 21:53:19'
					// },{
					// 	t_img:'http://124.220.177.66:8082/uploads/店铺/主持人头像/dm2.webp',
					// 	t_name:'线下女生',
					// 	t_time:'2022/05/26 21:53:19'
					// }]
					
					g_score:9.4,//x游戏分数
					a_state:1//x主持人状态，0未待选，1为有主持人
				},
				// game_num:0,//总 剧本人数
				// team_num:0,//总 组局人数
				score_full:0,//x分数小火花 完整
				score_half:0,//x分数小火花 半火
				pay_state:0,//x支付状态，0未支付，1已支付
				// 默认组局人员头像，（暂定为主持人2，3）
				girl_img:'http://124.220.177.66:8082/uploads/店铺/主持人头像/dm2.webp',
				boy_img:'http://124.220.177.66:8082/uploads/店铺/主持人头像/dm3.webp'
			}
		},
		// 分享转发
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log('用户点击分享')
		    }
		    return {
		      title: '自定义分享标题',
		      path: '/pages/test/test?id=123'
		    }
		  },
		// 页面加载时
		onLoad(v){
			this.val=v;
			this.getData();
			// this.game_num=this.x_data.g_boy+this.x_data.g_girl;
			// this.team_num=this.x_data.t_boy+this.x_data.t_girl;
			this.score_full=Math.trunc(this.x_data.g_score/2);
			this.score_half=this.x_data.g_score-this.score_full*2;
		},
		methods: {
			// 跳转组局详情页
			valTo(){
				// console.log(this.val.id);
				uni.navigateTo({
					url:'/pages/script/scriptDetails/scriptDetails?id='+this.val.id
				});
			},
			// 支付提示弹框
			pay(){
				uni.showModal({
					title: '需支付10元',
					content: '微信支付',
					confirmText:'支付',
					confirmColor:"#ffb41a",
					success: (res)=> {
						if (res.confirm) {
							this.pay_state=1;
							uni.request({
								url:"http://124.220.177.66:8082/juben/userData",
								method: "post",
								data:{
									"openID": "wx999"
								},
								success:(res)=> {
									// console.log(res.data.data[0]);
									this.x_data.t_msg.push({
										t_img:res.data.data[0].sex==1?this.boy_img:this.girl_img,
										t_name:res.data.data[0].nickName,
										t_time:this.now_time()
									});
									res.data.data[0].sex==1?this.x_data.t_boy++:this.x_data.t_girl++;
									this.team_num++
								}
							})
							console.log('用户点击支付');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 获取数据
			getData(){
				// 从本地缓存中异步获取指定 key 对应的内容
				uni.getStorage({
					key: '',
					success: function (res) {
						console.log(res.data);
					},
					fail:function(err){
						console.log(err);
					}
				});
				// 通过剧本ID查询剧本
				uni.request({
					url:"http://124.220.177.66:8082/juben/selectScriptById",
					method: "post",
					data:{
						"scriptID": this.val.id //剧本ID
					},
					success:(res)=> {
						// console.log(res.data.data[0]);
						this.x_data.g_msg2=res.data.data[0].otherTheme.join('，');//游戏信息2，类型
					}
				}),
				// 获取主持人信息
				uni.request({
					url:"http://124.220.177.66:8082/juben/getHost",
					method: "get",
					success:(res)=> {
						// console.log(res.data.data);
						this.x_data.a_img='http://124.220.177.66:8082'+res.data.data[0].hostHeader;//主持人图片
						this.x_data.a_name=res.data.data[0].hostNickName;//主持人名称
						this.x_data.a_num=res.data.data[0].leadCount;//主持人带本次数
						this.x_data.a_score=res.data.data[0].userEvaluate;//主持人分数
					}
				}),
				// 查询所有组局信息 
				uni.request({
					url:"http://124.220.177.66:8082/juben/getAllGroup",
					method: "get",
					success:(res)=> {
						// console.log(res.data.data);
						let d=res.data.data;
						for (let i=0;i<d.length;i++){
							if(d[i].id==this.val.id){
								this.x_data.g_state=d[i].orderStatus;//游戏状态
								this.x_data.g_img='http://124.220.177.66:8082'+d[i].scriptUrl;//游戏图片
								this.x_data.g_name=d[i].scriptName;//游戏名字
								this.x_data.g_msg1=d[i].gameTime;//游戏信息1，花费时间
								// this.x_data.g_msg2=d[i].gameTime.join('，');//游戏信息2，类型
								this.x_data.g_price=d[i].scriptPrice;//游戏价格
								this.str2time(d[i].gameStartDateTime);//游戏开始时间
								this.str2game_num(d[i].peopleNum)//剧本人数
								this.str2team_num(d[i].peopleCount,d[i].scriptCreateDate)//组局人员
								break
							}
						}
					}
				})
			},
			// 后台时间数据 转 前端时间格式
			str2time(v){
				v=v.split(" ");
				let time = v[1].split(":");
				if(v[2].slice(0,1)=='P'){
					time[0]=Number(time[0])+12;
				}
				time=this.time22(time[0])+':'+time[1];
				v=v[0].split("/");
				let year = v[2].replace(",","");
				let month = v[0];
				let day = v[1];
				let dt = new Date(year,month-1,day);
				let weekDay = ['天','一','二','三','四','五','六']
				this.x_data.g_time=month+'月'+day+'日\xa0周'+weekDay[dt.getDay()]+'\xa0'+time;
			},
			// 后台时间数据 转 前端时间格式（不包括星期）
			str2time2(v){
				let year=v.slice(0,4);
				let month=v.slice(5,7);
				let day=v.slice(8,10);
				return year+'/'+month+'/'+day+'\xa0'+v.slice(11,19);
			},
			// 获取当前时间数据
			now_time(){
				let str = new Date()
				let year = str.getFullYear(); //得到年份	
				let month = str.getMonth()+1;//得到月份
				let day = str.getDate();//得到日期
				let h= str.getHours();//得到小时数
				let min= str.getMinutes();//得到分钟数
				let s= str.getSeconds();//得到秒数
				str=year+'/'+this.time22(month)+'/'+this.time22(day)+'\xa0'+this.time22(h)+':'+this.time22(min)+':'+this.time22(s);
				return str
			},
			// 时间数据保持两位显示
			time22(v){
				v=Number(v)
				return v<10?'0'+v:v
			},
			// 后台剧本总人数数据 转 男女比例
			str2game_num(v){
				this.game_num=v;
				this.x_data.g_girl=Math.ceil(v/2);
				this.x_data.g_boy=v-this.x_data.g_girl;
			},
			// 后台组局总人数数据 装 男女比例,成员信息
			str2team_num(v,w){
				v=Number(v);
				let g = Math.ceil(v/2);
				let b = v-g;
				let arr=[];
				w=this.str2time2(w);
				for(let i=0;i<g;i++){
					arr.push({
						t_img:this.girl_img,
						t_name:'线下女生',
						t_time:w
					})
				};
				for(let i=0;i<b;i++){
					arr.push({
						t_img:this.boy_img,
						t_name:'线下男生',
						t_time:w
					})
				};
				this.team_num=v;
				this.x_data.t_girl=g;
				this.x_data.t_boy=b;
				this.x_data.t_msg=arr;
			},
		}
	}
</script>

<style lang="less" scoped>
	.box{
		background-color: rgb(13,19,31);
		color: white;
		padding: 60rpx 30rpx 0 30rpx;
	};
	.header{
		display: flex;
		justify-content: space-between;
		.h_left{
			display: flex;
			image{
				width: 180rpx;
				height: 230rpx;
				margin-right: 20rpx;
			}
			>view{
				>view:first-child{
					margin-bottom: 15rpx;
				}
				>view:nth-of-type(2),
				>view:nth-of-type(3),
				>view:nth-of-type(4){
					color:rgb(82,86,98);
					font-size: 30rpx;
					margin: 5rpx 0;
				}
				>view:nth-of-type(4),
				>view:last-child{
					color: rgb(135,127,180);
					>text,>icon{
						margin-right: 10rpx;
					}
				}
			}
		}
		.h_right{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			color: white;
			background-color: rgb(13,19,31);
		}
	}
	.time{
		background-color: rgb(34,36,51);
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		margin-top: 40rpx;
		border-radius:10rpx;
		>view{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 50%;
			>text{
				color: rgb(82,86,98);
				margin: 20rpx 0 10rpx 0;
			}
			>view{
				margin: 10rpx 0 30rpx 0;
			}
		}
		>view:first-child{
			border-right: 1px solid rgb(82,86,98);
		}
	}
	.msg{
		margin-top: 25rpx;
		border-radius:10rpx;
		padding: 30rpx;
		background-color: rgb(34,36,51);
		font-size: 30rpx;
		color: rgb(82,86,98);
		text{
			font-size: 35rpx;
			color: white;
		}
		>view:nth-of-type(1){
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid rgb(82,86,98);;
			>view{
				display: flex;
				>image,.unselected{
					width: 168rpx;
					height: 168rpx;
					margin:0 30rpx 30rpx 0;
					background-color: white;
					line-height: 168rpx;
					display: flex;
					justify-content: center;
					font-size: 35rpx;
					letter-spacing: 10rpx;
					border-radius: 10rpx;
				}
				>view{
					margin-top: 10rpx;
				}
			}
			>view:last-child{
				width: 30%;
				display: flex;
				flex-direction: column;
				align-items: center;
				>text{
					margin-top: 10rpx;
					color: rgb(135,127,180);
				}
			}
		}
		>view:last-child{
			margin-top: 20rpx;
			>view{
				margin-bottom: 15rpx;
				letter-spacing: 5rpx;
			}
		}
	}
	.team{
		margin-top: 25rpx;
		border-radius:10rpx;
		padding: 30rpx 30rpx 0 30rpx;
		background-color: rgb(34,36,51);
		font-size: 30rpx;
		>view:nth-of-type(1){
			display: flex;
			margin: 10rpx 0 20rpx 0;
			>view{
				margin-right: 75rpx;
				display: flex;
				>view{
					color: rgb(69,133,179);
				}
				>view:nth-of-type(1){
					color: white;
					background-color: rgb(19,81,129);
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					margin-right: 15rpx;
				}
			}
			>view:nth-of-type(3){
				>view:nth-of-type(1){
					background-color: rgb(112,53,83);
				}
				>view:nth-of-type(2){
					color: rgb(177,85,145);
				}
			}
		}
		>view:not(:nth-of-type(1)){
			border-top:  1px solid rgb(82,86,98);
			display: flex;
			align-items: center;
			>image{
				height: 100rpx;
				width: 100rpx;
				margin:20rpx 15rpx 20rpx 0;
				border-radius: 50%;
			}
			>view>text{
				color: rgb(82,86,98);
			}
		}
	}
	.null{
		height: 180rpx;
	}
	.footer{
		height: 180rpx;
		position: fixed;
		bottom: 0;
		color: white;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		>view{
			background-color: rgb(98,54,133);
			padding: 25rpx 0;
			width: 690rpx;
			display: flex;
			justify-content: center;
			border-radius: 50rpx;
		}
	}
	.full{
		background-color: rgb(51,45,57) !important;
		color: rgb(135,134,132);
	}
	@import url('../../../static/iconfont/iconfont.css');
	.icon-zhuanfa1{ 
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 30rpx;
		background-color: rgb(99,167,250);
		border-radius: 30%;
		margin-bottom: 15rpx;
	}
	.icon-huangguan{
		font-size: 70rpx;
		color: rgb(255,216,59);
	}
	.icon-fire,.icon-huo{
		color: rgb(255,180,20);
		font-size: 30rpx;
	}
</style>

